<template>
  <div class="member-exchange-bond">
    <c-title :text="text"></c-title>
    <van-tabs v-model="active" @click="change">
      <van-tab v-for="item in tabs" :title="item" :key="item"></van-tab>
    </van-tabs>
    <div class="box">
      <div class="box-item" v-for="(item,i) in list" :key="i">
        <div class="flex between align-center">
          <span style="font-size: 0.875rem;">{{item.order_sn}}</span>
          <span style="color: #e32323; font-size: 0.75rem;">{{item.status_name}}</span>
        </div>
        <div class="line"></div>
        <p>{{item.exchange_voucher_name}}</p>
        <p  class="tips">有效期:{{ item.created_at }}-{{ item.expire_time }}</p>
        <p class="tips" v-if="item.status !== 0 && item.status !== 3">寄售价格：{{$i18n.t('money')}}{{item.price}}</p>
        <div class="buttons">
          <p class="warning mr16" v-if="item.status == 0 && !item.can_sold">订单未完成</p>
          <p class="warning mr16" v-if="item.has_solding">寄售订单进行中，状态锁定</p>
          <!-- <button v-if="item.can_self_delivery" class="order-btn" @click="toOrders(item)">提货</button> -->
          <!-- <button v-if="item.can_quash" class="order-btn" @click="handle_repeal(item)">撤销寄售</button> -->
          <button v-if="item.status == 0" class="button" :class="item.can_sold?'open':'disabled'" :disabled="!item.can_sold" @click="show_dialog(item)" style="margin-left: 0.75rem;">寄售</button>
          <button v-if="item.status == 3" class="order-btn" @click="check_orders(item)">查看订单</button>
          <button v-if="item.status == 1 && item.can_agree " style="padding: 0.3125rem 1.5rem;" class="order-btn" @click="handle_conset(item)">同意</button>
        </div>
      </div>
    </div>

    <van-popup v-model="showDescription" closeable round class="description-popup set-pc-styleLeft">
      <div class="description-title">寄售协议</div>
      <div class="description-text" >
        <div v-html="agreement"></div>
        <van-button type="danger" round style="margin: 10px auto 0; display: block; padding: 0 36px;" size="small" @click="toAuth">我已阅读</van-button>
      </div>
    </van-popup>
    <van-dialog v-model="show" @confirm="confirm" :title="title" show-cancel-button confirmButtonText="确定">
      <div class="h40"></div>
      <template v-if="is_custom == 1">
        <van-field v-model="value" label="寄售价格" placeholder="请输入价格" :border="false" />
        <div style="height: 30px; text-align: center; color: #999; font-size: 0.75rem;">自定义价格区间:{{min_price}}元-{{ max_price }}元</div>
      </template>
    </van-dialog>
  </div>
</template>

<script>
import { scrollMixin } from '../../../utils/mixin';
export default {
  mixins: [scrollMixin],
  data() {
    return {
      member_voucher_id:"",
      max_price:"",
      min_price:"",
      value: "",
      tabs: ['全部', '未寄售', '寄售中', '已出售', '自行寄回'],
      active: 0,
      text: "兑换劵",
      list: [],
      show: false,
      is_custom:0,
      title:'寄售设置',

      isLoadMore: true,
      page: 1,
      total_page: 0,

      showDescription: false,
      agreement: '',
      isAuth: false,//是否需要实名认证
    }
  },
  activated() {
    this.member_voucher_id = '';
    this.max_price = '';
    this.min_price =  '';
    this.active = 0;
    this.show = false;
    this.isLoadMore = true;
    this.getData()
  },
  methods: {
    handle_conset(item){
      $http.post("plugin.consignment.frontend.controllers.member-exchange-voucher.is-agree",{member_voucher_id:item.id},'.').then(res=>{
        this.$toast(res.msg)
        if(res.result){
          this.getData(1)
        }
      })
    },
    handle_repeal(item){
      this.$dialog.confirm({
        title: '提示',
        message: '是否确定撤销寄售',
      })
        .then(() => {
          $http.post("plugin.consignment.frontend.controllers.member-exchange-voucher.quash-sold",{member_voucher_id:item.id},'.').then(res=>{
            this.$toast(res.msg);
            if(res.result){
              this.getData(1);
            }
          });
        })
        .catch(() => {
          // on cancel
        });

    },
    confirm(){
      $http.post("plugin.consignment.frontend.controllers.member-exchange-voucher.sold",{
        member_voucher_id:this.member_voucher_id,
        price:this.value
      },'loading').then(res=>{
        this.$toast(res.msg)
        if(res.result == 1){
          this.showDescription = false;
          this.getData(1)
        }
      })
    },
    check_orders({sold_order_id}){
      this.$router.push(
          this.fun.getUrl("orderdetail", {order_id:sold_order_id,orderType: "shop",show_detail_pay:0})
        );
    },
    show_dialog(item) {
      this.is_custom = item.exchange_voucher.is_custom;
      if(item.exchange_voucher.is_custom){
        this.title = '寄售设置';
      }else{
        this.value = "";
        this.title = '是否确认寄售商品';
      }
      this.value = item.price;
      this.member_voucher_id = item.id
      this.max_price = item.exchange_voucher.max_price;
      this.min_price =  item.exchange_voucher.min_price;

      this.showDescription = true;
    },
    change() {
      this.getData(1)
    },
    getData(page = 1) {
      let json = {
        page,
        status:this.active - 1,
        validate_page: 1
      }
      if(this.active==0){
        delete json.status
      }
      $http.post("plugin.consignment.frontend.controllers.member-exchange-voucher.index",json,'loading').then(res=>{
        if(res.result){
          let {vember_voucher_list,plugin_name,agreement} = res.data;
          this.text = plugin_name;
          this.agreement = agreement;
          this.page = vember_voucher_list.current_page;
          this.total_page = vember_voucher_list.last_page;
          (page==1)?(this.list = vember_voucher_list.data || []):(this.list = this.list.concat(vember_voucher_list.data));
          this.isLoadMore = true;
          if(res.validate_page.is_auth == 0 && res.validate_page.real_name_auth_is_open && res.validate_page.real_name_auth_scene.indexOf("160") > -1 ){
            this.isAuth = true;//需要实名
          }
        }else{
          this.$toast(res.msg);
        }
      })
    },
    getMoreData() {
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      }
      let page = this.page + 1;
      this.getData(page)
    },
    toAuth(){
      if( !this.isAuth ) return this.show = true;
      this.$store.commit("setCallback", window.location.href);
      let MinUrl = this.fun.getSiteRoot() + "/addons/yun_shop/?menu#/personBank?from=bindRealName&i=" + this.fun.getKeyByI() + "&type=" + this.fun.getTyep() + "&mid=" + this.fun.getKeyByMid();
      window.location.href = MinUrl;
    },
    toOrders(item) {
      let json = {
        goodsId: item.goods_id,
        optionsId: 0,
        total: 1,
        VoID: item.id,
        tag: 'consignment'
      };
      this.$router.push(this.fun.getUrl("goodsorder", {}, json));
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .van-field__label {
  text-align: right;
  font-size: 0.9375rem;
  width: 4.2rem;
  color: #333;
}

::v-deep .van-field__control {
  padding-left: 0.75rem;
  padding-bottom: 0.5rem;
}

::v-deep .van-dialog__header {
  font-size: 1.125rem;
}

::v-deep .van-cell__value {
  border-bottom: 1px solid #ccc;
  font-size: 0.9375rem;
  margin-right: 1.25rem;
}

.member-exchange-bond {
  .tips {
    color: #999;
    font-size: 0.75rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .order-btn {
    padding: 0.3125rem 0.6875rem;
    font-size: 0.8125rem;
    border: none;
    background: #fff;
    border-radius: 100px;
    border: 1px solid #f14e4e;
    color: #f14e4e;
    min-width: 4.75rem;
  }

  .h40 {
    height: 1.9375rem;
  }

  .disabled {
    background: #ccc;
  }

  .open {
    background: #f14e4e;
  }

  .button {
    padding: 0.3125rem 1.5rem;
    font-size: 0.8125rem;
    border: none;
    border-radius: 100px;
    color: #fff;
  }

  .buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .box {
    margin-top: 0.75rem;
    padding-bottom: 2rem;
  }

  .line {
    height: 1px;
    background: #e7e7e7;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .flex {
    display: flex;
  }

  .between {
    justify-content: space-between;
  }

  .align-center {
    align-items: center;
  }

  .mr16 {
    margin-right: 0.5rem;
  }

  .warning {
    color: #f14e4e;
    font-size: 0.75rem;
  }

  .box-item {
    background: #fff;
    text-align: left;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
  }
}

.description-popup {
  width: 85%;

  .description-title {
    height: 3.75rem;
    width: 100%;
    line-height: 3.75rem;
    font-size: 1.25rem;
    color: #000;
  }

  .description-text {
    height: 18rem;
    overflow-y: scroll;
    padding: 0.875rem;
    text-align: left;

    ::v-deep img {
      max-width: 100%;
      height: auto;
      object-fit: contain;
    }
  }
}
</style>